import {BaseRenderer} from "./base-renderer";
import {h, resolveComponent} from "vue";
import {cloneDeep} from "lodash";

/**
 * 表单渲染器
 */
export class FormRenderer extends BaseRenderer {
    /**
     * 处理带选项的组件渲染，如 el-select、el-checkbox-group、el-radio-group 等
     * @param componentProps 组件属性对象
     * @param item 当前渲染项
     * @param propsData 属性数据
     * @param optionComponentName 选项组件名称
     */
    private processOptionsComponent(componentProps: any, item: any, propsData: any, optionComponentName: string) {
        if (!item?.optionsData) return;
        
        const optionComponent = resolveComponent(optionComponentName);
        const optionsData = item.optionsData;
        
        if (optionsData.list) {
            componentProps.children = optionsData.list.map((option: any) => {
                return h(optionComponent, {
                    key: option[optionsData.value],
                    label: option[optionsData.label],
                    value: option[optionsData.value]
                });
            });
        } else if (optionsData.reflect && propsData?.reflections?.[optionsData?.reflect]) {
            componentProps.children = propsData.reflections[optionsData.reflect].map((option: any) => {
                return h(optionComponent, {
                    key: option.value,
                    label: option.label,
                    value: option.value
                });
            });
        }
    }

    render(item: any, propsData: any, emit: any) {
        const {eType, prop, props, events, style, isDisable} = item;
        const Type = resolveComponent(eType);

        // 处理事件
        const normalizedEvents = this.processEvents(events);

        // 构建组件属性
        const componentProps: any = {
            ...cloneDeep(props),
            ...normalizedEvents,
            style: style,
            disabled: typeof isDisable === 'function' ? isDisable(propsData?.data) : isDisable
        };

        // 只有当prop存在时才绑定modelValue和更新事件
        if (prop !== undefined) {
            componentProps.modelValue = propsData?.data?.[prop];
            componentProps['onUpdate:modelValue'] = (value: any) =>
                emit("setData", {key: prop, value: value});
        }

        // 处理特定组件属性
        switch (eType) {
            case 'el-select':
                this.processOptionsComponent(componentProps, item, propsData, 'el-option');
                break;
            case 'el-checkbox-group':
                this.processOptionsComponent(componentProps, item, propsData, 'el-checkbox');
                break;
            case 'el-radio-group':
                this.processOptionsComponent(componentProps, item, propsData, 'el-radio');
                break;
            case "el-upload":
                componentProps.onSuccess = (value: any) => emit("setData", {key: prop, value: value})
                componentProps.children = h(resolveComponent("el-button"), {
                    type: "primary",
                }, "上传");
                break;
            default:
                break;
        }

        // 渲染组件
        return h(Type, componentProps, componentProps.children);
    }
}